<?
	session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
	<title>Lobby</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="res/js/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="res/js/global.js"></script>
	
	<!-- Page customized -->
	<script type="text/javascript">

	// saved parameters
	var lobby_id = 0;
	var my_alias = '';
	var lobby_vid_stamp = 0;
	var scroll_pos = 0;

	$(document).ready(function() {

		custom_login_success_callback = function() {
			init();
		}

		$('#speak_here').keypress(function(event) {
				if(event.keyCode == 13) {
					speak();
					return false;
				}
			});
		
		init();
	});

	/* ------------------- UI handling functions ---------------------- */

	function printLn(msg) {

		$('#room').append(msg.url2link() + '<br/>');
	}

	function scrollToTheEnd() {
		var to = $("#room").prop("scrollHeight");
		$('#room').scrollTop(to);
	}

	function printErrLn(state, err) {
		printLn('err: [' + state + '] ' + err);
	}

	function toScreen(to_screen_data) {
		for (var ts in to_screen_data) {
			printLn('<span class="c1">system: </span>' + to_screen_data[ts]);
		}
	}

	function setHeading(heading_text) {
		$('#lobby_head').html(heading_text);
	}

	function clearScreen() {
		$('#room').html('');
	}

	function setScreen(text) {
		$('#room').html(text);
	}

	/* ------------------ AJAX hanlding functions --------------------- */

	function init() {
		call('ajax/lobby.php?act=$init',
			function(init_data) {
				if (init_data.data.lobby_id != null) {
					clearScreen();

					lobby_id = init_data.data.lobby_id;
					my_alias = init_data.data.alias;
					setHeading(init_data.data.heading);
					toScreen(init_data.data.to_screen);

					printLn('');

					handlePoll(init_data.data.poll);

					setInterval('poll()', 500);
				}
				else
				{
					setScreen('<center>you are now talking to yourself.<br/><br/>Talk to someone else?<br/>Type: /join cpe17i</center>');
				}
			},
			function(data) {
				printErrLn('$initialization', data.err);
			});
	}

	function handlePoll(poll_data) {
		for (var p in poll_data) {

			if (poll_data[p].uid == 0) {
				/* boardcast */
				if (poll_data[p].alias == 'print') {
					toScreen(new Array( poll_data[p].txt ));
				}
				else if (poll_data[p].alias == 's_head') {
					setHeading(poll_data[p].txt);
					toScreen(new Array( 'changed heading: ' + poll_data[p].txt ));
				}
					
			} else {
				printLn (
					'[' + poll_data[p].alias + '] ' + poll_data[p].txt
				);
			}
			lobby_vid_stamp = p;
		}
		scrollToTheEnd();
	}

	function handleAjaxJson2ResultPane(data) {
		$('#result').html( '<pre>' + JSON.stringify(data, null, '\t') + '</pre>' );
	}

	/* ------------------ Event hanlding functions --------------------- */

	function speak() {
		var voice = $('#speak_here').val().trim();

		alert(voice);

		voice = voice.replace('\r\n', '<br />');
		voice = voice.replace('\r', '<br />');
		voice = voice.replace('\n', '<br />');

		var cmd = '';
		if (voice.startsWith('/')) {
			cmd = voice.split(" ")[0];
			voice = voice.substring(cmd.length).trim();
			cmd = cmd.substring(1);
		} else {
			cmd = 'speak';
		}

		$('#speak_here').val('');

		/* some command should be handle here */

		call('ajax/lobby.php?act=' + cmd + '&data=' + encodeURIComponent(voice),
			function(data) {
				if ( ! empty(data.data.poll)) {
					handlePoll(data.data.poll);
				}

				if ( ! empty(data.data.to_screen)) {
					toScreen(data.data.to_screen);
				}

			},
			function(data) {
				$('#room').append(
					'err: [' + cmd + '] ' + voice + '<br/>' +
					'err: [cause] ' + data.err + '<br/>'
				);
			});
	}

	function poll() {
		call('ajax/lobby.php?act=$poll',
			function(data) {
				if ( ! empty(data.data.poll)) {
					handlePoll(data.data.poll);
				}
			},
			function(data) {
				$('#room').append(
					'err: [$polling] ' + data.err + '<br/>'
				);
			});
	}

	</script>

	<link href="res/css/qt_site.css?<?php echo microtime (true); ?>"  rel="stylesheet" type="text/css" >
	<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:500' rel='stylesheet' type='text/css'>
	<style>
		body {
			font-family: 'Terminal Dosis', sans-serif;
			font-size: 20px;
		}

		#logoutin span.white, #logoutin a.white {
			color: gray;
			font-size: 16px;
		}

		#separator span.separator {
			color: black;
			font-size: 16px;
		}

		#logoutin {
			margin-right: 31px;
			margin-bottom: -20px;
		}

		.page_content {
			font-family: tahoma;
		}

		.curve-top {
			-moz-border-top-right-radius: 10px;
			border-top-right-radius: 10px;
			-moz-border-top-left-radius: 10px;
			border-top-left-radius: 10px;

			padding-top: 10px;
			padding-left: 10px;
			padding-right: 10px;
		}

		.curve-bot {
			-moz-border-bottom-right-radius: 10px;
			border-bottom-right-radius: 10px;
			-moz-border-bottom-left-radius: 10px;
			border-bottom-left-radius: 10px;

			padding-bottom: 10px;
			padding-left: 10px;
			padding-right: 10px;
		}

		<? $c = '#0ae'; ?>

		.c1 {
			color: <? echo $c; ?>;
		}

		.lobby-border {
			border: 1px solid <? echo $c; ?>;
		}

		.lobby-enclose-pane {
			background-color: <? echo $c; ?>; 
			color:white;
		}

		.speak_box {
			margin-top: 10px;
			margin-bottom: -2px;
			padding: 0px;
			background-color: <? echo $c; ?>;
			width: 98%;

			border: 0;
		    outline: none;
		    outline-offset: 0;

		    color: white;

		    font-family: tahoma;
		    font-size: 12px;

		    resize: none;
		    
		}
	</style>
</head>
<body style="background-color: white;">

	<div id="content">
		<center>
			<div style="width:100%; margin-top: 42px;">
				<?
					$me = 'hidden';
					include_once('_nav.php');
				?>

				<!-- ERROR MESSAGE -->
				<div class="clear"></div>
				<div id="em"><span id="ajax_error_message"></span></div>

				<!-- PAGE CONTENT of W:1000px -->
				<div class="curve page_content" style="text-align:center;">
					<!-- CONSOLE -->
					<div id="lobby_head">
					</div>
					<div class="clear"></div>
		            <div class="curve-top lobby-border" style="margin-top: 3px; min-height: 450px">
		            	<div id="room" style="height: 450px; font-size: 12px; font-family: tahoma; text-align: left; overflow-y: auto; overflow-x: hidden; color: black;">
		            	</div>
		            </div>
		            <div class="curve-bot lobby-border lobby-enclose-pane">
		                <textarea class="speak_box" 
		                	id="speak_here" type="text" 
		                	placeholder="speak here my friends" ></textarea>
		            </div>
				</div>
			</div>
			<span style="font-size: 14px">
				© 2011 <a class="c1" href="http://www.syllistudio.com" target="_blank">Sylli Studio Co.,Ltd.</a> all rights reserved.
			</span>
		</center>
	</div>
</body>
</html>